
<!-- 堂食  店主  进来的首页 -->
<template>
  <div class="home-box"> 
    <loader :loaderShow="loaderShow"></loader> 
     <swiper class="swiper" auto :interval="4000" height="4.20rem" :show-dots="false">
      <swiper-item class="swiper-img" v-for="(item, index) in bannerList" :key="index">
        <img :src="item.url" class="header-img">
      </swiper-item>
    </swiper>
    <!-- 卡片 -->
    <div class="h-card">
        <div class="h-first-line">
            <div class="line-item">
                <div class="line-data"><countup :end-val="pageData.total" :duration="2" :decimals="2" ></countup></div>
                <div class="line-title">总销售(元)</div>
            </div>
            <div class="line-item">
                <div class="line-data"><countup :end-val="pageData.month" :duration="2" :decimals="2" ></countup></div>
                <div class="line-title">本月销售(元)</div>
            </div>
        </div>
        
    </div>
    <!-- 卡片 -->
    <!-- 简报-->
    <div class="jb-box">
      <div class="bulletin-title">今日简报</div>
      <div class="data-box">
          <div class="data-item" @click="goSaleOrder('1')">
            <div class="data-item-num"> <span class="symbol">￥</span> <countup :end-val="pageData.today" :duration="2" :decimals="2" ></countup></div>
            <div class="data-item-title">今日收入(<span class="strong">{{ pageData.todayProfit }}</span>元)</div>
            <div class="data-item-title">今日销售(<span class="strong">{{pageData.todayOrders}}</span>份)</div>
          </div>
          <div class="data-item"  @click="goSaleOrder('2')">
            <div class="data-item-num">  <span class="symbol">￥</span><countup :end-val="pageData.yesterday" :duration="2" :decimals="2" ></countup></div>
            <div class="data-item-title">昨日收入(<span class="strong">{{ pageData.yesterdayProfit }}</span>元)</div>
            <div class="data-item-title">昨日销售(<span class="strong">{{pageData.yesterdayOrders}}</span>份)</div>
          </div>
      </div>
    </div> 
    <!--应用列表 -->
    <div class="app-list">
      <div class="app-item" v-for="(item,index) in appList" :key="index" @click="goUrl(item.url,index)">
        <img :src="item.icon" alt="" />
        <div>{{item.text}}</div>
      </div>
    </div>

  </div>
</template>

<script> 
import loader from '@/components/loader'
import api from '@/api/api.js'
import util from '@/utils/util.js'
import { Swiper,SwiperItem } from 'vux'
export default { 
  components: {
    loader,
    Swiper,
    SwiperItem
  },
  data () {
    return {
      options:{},
      myShoopId:'',
      loaderShow:true,
      pageData:{
        devices: 0,
        month: 0,
        today: 0,
        total: 0,
        todayOrders:0,
        yesterdayOrders: 0,
        yesterday: 0,
        stores:0,
      },
      userInfo:{},
      showFilter:false, //侧边筛选显示
      treeList: [],
      bannerList:[],
      appList:[
        {text:'店铺',url:"/shopkeeperShopDetail",icon:require('../../../static/images/dp_icon.png'),haveId:true},
        {text:'销售订单',url:"/shopSaleOrder",icon:require('../../../static/images/xsdd_icon.png'),haveId:true},
        {text:'库存',url:"/shopkeeperStockList",icon:require('../../../static/images/kc_icon.png'),haveId:true},
        {text:'补货订单',url:"/warehouseOrder",icon:require('../../../static/images/bhdd_icon.png'),haveId:true},
        {text:'用户反馈',url:"/feedBack",icon:require('../../../static/images/fankui_mng.png'),haveId:true },
        {text:'当前订单',url:"/shopOrders",icon:require('../../../static/images/ordermng.png'),haveId:true, noOpen:true},
        {text:'店铺收入',url:"/shopIncome",icon:require('../../../static/images/shouru_icon.png'),haveId:true},
        {text:'库存盘点',url:"/stockPDList",icon:require('../../../static/images/kucunpd_icon.png'),haveId:true}
      ]
    }
  },
  activated (){
    if(localStorage.hj_userInfo && JSON.parse(localStorage.hj_userInfo).jwt){ 
      this.userInfo = JSON.parse(localStorage.hj_userInfo) 
      this.getData()
    }else {// 未登录 去登录
      return this.$router.push({path:'/login'})
    }
  },
  created(){
    if(localStorage.hj_userInfo && JSON.parse(localStorage.hj_userInfo).jwt){ 
      this.getPosterList();
      this.$store.dispatch('getMessageNum'); 
    }
   
    if(this.$route.query.code){ //从微信跳转过来 带code
      this.bindWX(this.$route.query.code);
    }
  }, 
  mounted () {
    setTimeout(()=>{
      this.loaderShow = false 
    },1000)
    if(!this.myShoopId){
      this.getShopId();
    }
  },
  filters: {
     
  },
  methods: { 
    getShopId(){ 
      api.shopMng.shopList({},res=>{  
        this.myShoopId = res.result.data[0].storeId;
        this.$store.commit("setMyStoreId",res.result.data[0].storeId)
      })
    },
    goSaleOrder(type){
      // 筛选默认最近一个月 
      let today= new Date();
      let yesterday =  new Date(today.getTime()-(1*24*60*60*1000));
      let todayStr = util.timeTampt(today); 
      let yesterdayStr = util.timeTampt(yesterday); 
      if(type==1){//今日收入
        this.$router.push({path:'/incomeList',query:{startTime: todayStr}}); 
      }else if(type==2){//昨日收入
        this.$router.push({path:'/incomeList',query:{startTime: yesterdayStr, endTime: yesterdayStr}}); 
      }
    },
    bindWX(code){
      api.publick.getOpenId({
        code:code
      },res=>{
        sessionStorage.hj_openid = res.result;
      })
    },
    getData(){
      api.entirety.getData({},res=>{
        this.pageData = res.result;
      })
    },
    getPosterList(){
      api.publick.getPosterList({},res=>{
         this.bannerList=res.result.data;
      })
    },
    goUrl(path,index){
      const haveId = this.appList[index].haveId;
      const noOpen =  this.appList[index].noOpen;
      if(noOpen){
        return this.$vux.toast.show({
          text: '暂未开放',
          type:'text'
        })
      }
      let params ={};
      if(haveId){
        params.id = this.myShoopId
      }
      this.$router.push({ path:path,query:params});

      if(path=="/addOrder"){
        this.$store.commit("setCheckGoods",[]);
        //   this.$store.commit("chooseShopList",[])
      }
    }
  }
}
</script> 
<style lang="less" scoped> 
  .header-img{
    width: 100%;
    height: 4.2rem;
  }
  .swiper,.swiper-img{
    width: 7.5rem;
    height: 4.2rem;
  }
  .marginleft35{
    margin-left: 0.35rem;
  }
  .flex1{
    flex: 1;
  }
  .h-secoed-line{
    background: #FCCC34;
  } 
  .app-list{
    // padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    width: 7.10rem; 
    background: #FFFFFF;
    box-shadow: 1px 1px 0.43rem 0 rgba(36, 36, 36, 0.05);
    border-radius: 0.15rem;
    margin: 0.25rem auto;
    .app-item{
      text-align: center;
      padding: 0.24rem 0;
      width: 25%;
      img{
        width: 0.64rem;
        height: 0.64rem;
        display: block;
        margin:0 auto 0.24rem;
      }
    }
  }
  .upload-time{
    color: #999;
    font-size: 13px;
    padding: 20px;
  }
  .h-card{
    width: 7.10rem; 
    margin: 0.09rem auto 0;
    border-radius: 0.15rem;
    background: #FABE00; 
    box-shadow: 2px 2px 43px 0px rgba(36, 36, 36, 0.05);
    overflow: hidden;
    .h-first-line{
        padding: 0.40rem 0 0.36rem;

        display: flex;
        justify-content: center;
        align-items: center;
        .line-item{
            flex: 1;
            text-align: center;
            .line-title{
                line-height: 30px;
                margin-top: 0.17rem;
                color: #fff; 
            }
            .line-data{
                color: #fff;
                font-size:0.42rem;
            }
        }
    }
    .h-secoed-line{
        height: 0.73rem; 
        display: flex;
        justify-content: space-between;
        align-items: center; 
        padding: 0 0.28rem;
        .line-title{
          color: #fff;
          
        }
        .second-num{
            margin-left: 12px;
            color: #fff;
        }
        .isclick{
            border-color: #fff;
        }
        &:active{
            opacity: .7;
        }
    }
  }
  .jb-box{
    width: 7.10rem;
    background: #FFFFFF;
    box-shadow: 0.02rem 0.02rem 0.43rem 0 rgba(36, 36, 36, 0.05);
    border-radius: 0.15rem;
    padding: 0.28rem;
    margin: 0 auto;
    .bulletin-title{
      font-size: 0.32rem;
      font-weight: bold;
      line-height: 0.32rem;
    }
    .data-box{
      display: flex;
      flex-wrap: wrap;
      margin-top: 0.32rem;
      .data-item{
        width: 50%;
        text-align: center;
        .strong{
            color: #FABE00 !important;
            font-weight: bold;
          
          }
        .data-item-title{
          color: #999; 
          margin-top: 0.18rem;
        }
        .data-item-num{
          font-size: 0.42rem;
          font-weight: bold; 
          
          .symbol{
            font-weight: 400;
            font-size: .28rem;
          }
        }
      }
    }

  }
  .height50{
    height: 1.07rem;
  }
  .home-box{
    background: #F7F7F7;
    min-height: 100vh;
  }
  .animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.vux-indicator.custom-bottom {
  bottom: 30px;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
.swiper-demo-img img {
  width: 100%;
}
</style>